$(document).ready(function () {


  $http.get('/todos/1', { baseURL: 'https://jsonplaceholder.typicode.com' })
    .then(res => console.log(res))
    .catch(err => console.error(err))
  // 数据数组
  var tabsData = [
    'Products',
    'Categories',
    'Blogs',
    'Applications',
    'DocumentsResources'
  ];

  const enum_Tabs = {
    'Products': renderProducts,
    'Categories': renderCategories,
    'Blogs': renderBlogs,
    'Applications': renderApplications,
    'DocumentsResources': renderDocuments
  };

  // products 数据
  const productsDataList = {
    total: 10,
    pageSize: 9,  // 每页显示多少条数据
    currentPage: 1,
    keyword: 'Products',
    list: [
      // {
      //   id: 9,
      //   img: '../../img/PC/GroupPro.png',
      //   title: 'CB4512 Monocrystalline Synthetic Diamond',
      //   desc: 'Monocrystalline Synthetic Diamond is complete, transparent in color, high in strength, good in thermalstability, and low in magnetism...',
      //   isMyLike: false
      // }, {
      //   id: 9,
      //   img: '../../img/PC/GroupPro.png',
      //   title: 'CB4512 Monocrystalline Synthetic Diamond',
      //   desc: 'Monocrystalline Synthetic Diamond is complete, transparent in color, high in strength, good in thermalstability, and low in magnetism...',
      //   isMyLike: false
      // },
      // {
      //   id: 9,
      //   img: '../../img/PC/GroupPro.png',
      //   title: 'CB4512 Monocrystalline Synthetic Diamond',
      //   desc: 'Monocrystalline Synthetic Diamond is complete, transparent in color, high in strength, good in thermalstability, and low in magnetism...',
      //   isMyLike: false
      // }
    ]
  }

  const getDataList = {
    'Products': productsDataList,
    'Categories': {
      total: 88,
      pageSize: 9,  // 每页显示多少条数据
      currentPage: 1,
      keyword: 'Products',
      list: [
        {
          id: 1,
          img: '../../img/PC/categories_img.png',
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
        {
          id: 2,
          img: '../../img/PC/categories_img.png',
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
        {
          id: 3,
          img: '../../img/PC/categories_img.png',
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
      ]
    },
    'Blogs': {
      total: 10,
      pageSize: 9,  // 每页显示多少条数据
      currentPage: 1,
      list: [
        {
          id: 1,
          img: '../../img/PC/blogs_img.png',
          title: 'CB4512 Monocrystalline Synthetic Diamond',
          desc: 'Monocrystalline Synthetic Diamond is complete, transparent in color, high in strength, good in thermalstability, and low in magnetism...',
          time: 'Oct 18 ,2024',
          watchNum: '4.5K',
        },
        {
          id: 1,
          img: '../../img/PC/blogs_img.png',
          title: 'CB4512 Monocrystalline Synthetic Diamond',
          desc: 'Monocrystalline Synthetic Diamond is complete, transparent in color, high in strength, good in thermalstability, and low in magnetism...',
          time: 'Oct 18 ,2024',
          watchNum: '4.5K',
        },
      ]
    },
    'Applications': {
      total: 10,
      pageSize: 9,  // 每页显示多少条数据
      currentPage: 1,
      list: [
        {
          id: 1,
          img: '../../img/PC/app_img.png',
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
        {
          id: 1,
          img: '../../img/PC/app_img.png',
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
        {
          id: 1,
          img: '../../img/PC/app_img.png',
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
      ]
    },
    'DocumentsResources': {
      total: 10,
      pageSize: 9,  // 每页显示多少条数据
      currentPage: 1,
      list: [
        {
          id: 1,
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
        {
          id: 2,
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
        {
          id: 3,
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
        {
          id: 4,
          title: 'CB4512 Monocrystalline Synthetic Diamond',
        },
      ]
    }
  }


  const $tabsContainer = $('.search-tabs');
  const $underline = $tabsContainer.find('.underline');

  // 动态渲染 Tabs
  tabsData.forEach(tabName => {
    $tabsContainer.append(`<div class="tabs-text">${tabName}</div>`);
  });

  const $tabs = $tabsContainer.find('.tabs-text');

  // 初始化显示第一个 Tab
  const $firstTab = $tabs.eq(0);
  const firstTabName = $firstTab.text().replace(/\s|&/g, ''); // 去掉空格和 & 符号
  // 设置默认选中的值
  var tabsDefault = firstTabName;
  $firstTab.addClass('active');
  $(`.${tabsData[0]}`).addClass('active');



  // function moveUnderlineTo ($tab) {
  //   if (!$tab.length) return;

  //   const tabRect = $tab[0].getBoundingClientRect();
  //   const containerRect = $tab.parent()[0].getBoundingClientRect();

  //   const left = tabRect.left - containerRect.left;
  //   const width = tabRect.width;
  //   const top = tabRect.top - containerRect.top + tabRect.height; // 下划线在 tab 下方
  //   const isMobile = window.innerWidth <= 768;
  //   const extraOffset = isMobile ? 3 : 3; // 可微调：给下划线与 tab 底部额外间距


  //   $underline.css({
  //     width: width + 'px',
  //     left: left + 'px',
  //     top: top / 10 + extraOffset + 'rem'
  //   });
  // }

  // tabs点击事件
  $tabs.click(function () {
    const $this = $(this);
    const tabName = $this.text().replace(/\s|&/g, '');
    tabsDefault = tabName;

    // 更新 Tab 样式
    $tabs.removeClass('active');
    $this.addClass('active');


    // moveUnderlineTo($this)
    // 下划线移动
    // $underline.css({
    //   width: $this.outerWidth(),
    //   left: $this.position().left,
    //   top: $this.position().top + $this.outerHeight() - $underline.outerHeight() - -21
    // });

    // 隐藏前一个内容，显示当前内容
    $('.products-content').removeClass('active');
    $(`.${tabName}`).addClass('active');

    // 初始化渲染第一个 Tab
    enum_Tabs[tabsDefault](getDataList[tabsDefault]);
  });

  // 渲染公共无数据界面
  function renderNoData ($container) {
    $container.append(`
       <div class="no-data-content">
          <div class="loading-text-top">
          <div class="loading-info">
<svg width="89" height="88" viewBox="0 0 89 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.861 67.254C76.1415 67.254 76.4001 66.979 76.4001 66.682C76.4001 66.385 76.1415 66.1155 75.861 66.1155C75.5805 66.1155 75.322 66.3905 75.322 66.682C75.322 66.979 75.5805 67.254 75.861 67.254ZM63.7821 80.432C63.9801 80.641 64.2606 80.762 64.5356 80.762C64.6779 80.7616 64.8187 80.7321 64.9492 80.6753C65.0797 80.6186 65.1973 80.5358 65.2947 80.432C65.4937 80.2141 65.6041 79.9296 65.6041 79.6345C65.6041 79.3394 65.4937 79.0549 65.2947 78.837C65.1971 78.7335 65.0795 78.6508 64.949 78.5941C64.8185 78.5374 64.6779 78.5077 64.5356 78.507C64.3942 78.5082 64.2545 78.538 64.125 78.5947C63.9955 78.6515 63.8788 78.7339 63.7821 78.837C63.5818 79.0543 63.4707 79.339 63.4707 79.6345C63.4707 79.93 63.5818 80.2147 63.7821 80.432ZM47.9683 87.505C48.2653 87.8185 48.6833 88 49.1014 88C49.3138 87.998 49.5237 87.9531 49.7184 87.868C49.9131 87.783 50.0886 87.6595 50.2345 87.505C50.5368 87.1778 50.7046 86.7487 50.7046 86.3032C50.7046 85.8578 50.5368 85.4287 50.2345 85.1015C50.0891 84.946 49.9138 84.8215 49.7191 84.7355C49.5243 84.6495 49.3142 84.6037 49.1014 84.601C48.8889 84.603 48.679 84.6479 48.4843 84.733C48.2896 84.818 48.1141 84.9415 47.9683 85.096C47.6644 85.4235 47.4956 85.8538 47.4956 86.3005C47.4956 86.7472 47.6644 87.1775 47.9683 87.505ZM30.9224 87.01C31.3185 87.4225 31.874 87.67 32.435 87.67C32.7177 87.667 32.9969 87.607 33.2559 87.4936C33.5149 87.3802 33.7483 87.2157 33.9422 87.01C34.3446 86.5741 34.568 86.0027 34.568 85.4095C34.568 84.8163 34.3446 84.2449 33.9422 83.809C33.7483 83.6033 33.5149 83.4388 33.2559 83.3254C32.9969 83.212 32.7177 83.152 32.435 83.149C32.1514 83.1512 31.8712 83.2109 31.6112 83.3243C31.3512 83.4377 31.1169 83.6026 30.9224 83.809C30.5227 84.2451 30.301 84.8152 30.301 85.4067C30.301 85.9983 30.5227 86.5684 30.9224 87.0045V87.01ZM15.8237 79.1175C16.3187 79.64 17.0118 79.9425 17.7104 79.9425C18.0651 79.9397 18.4156 79.8652 18.7408 79.7234C19.066 79.5817 19.3591 79.3755 19.6025 79.1175C20.1054 78.5721 20.3846 77.8574 20.3846 77.1155C20.3846 76.3736 20.1054 75.6589 19.6025 75.1135C19.3591 74.8555 19.066 74.6493 18.7408 74.5076C18.4156 74.3658 18.0651 74.2913 17.7104 74.2885C17.3565 74.292 17.0071 74.3669 16.6829 74.5086C16.3587 74.6504 16.0665 74.8561 15.8237 75.1135C15.3208 75.6589 15.0416 76.3736 15.0416 77.1155C15.0416 77.8574 15.3208 78.5721 15.8237 79.1175ZM5.41137 65.4225C6.00542 66.055 6.84149 66.4235 7.67755 66.4235C8.10381 66.4195 8.52483 66.3292 8.91525 66.1581C9.30567 65.9871 9.6574 65.7387 9.94924 65.428C10.5526 64.773 10.8876 63.915 10.8876 63.0245C10.8876 62.134 10.5526 61.276 9.94924 60.621C9.6574 60.3103 9.30567 60.062 8.91525 59.8909C8.52483 59.7198 8.10381 59.6295 7.67755 59.6255C7.25268 59.6298 6.83304 59.7197 6.44368 59.8898C6.05433 60.0599 5.70324 60.3067 5.41137 60.6155C4.8064 61.2708 4.47047 62.1299 4.47047 63.0218C4.47047 63.9136 4.8064 64.7727 5.41137 65.428V65.4225ZM1.59407 48.5265C1.93462 48.8872 2.34449 49.1754 2.79911 49.3738C3.25373 49.5723 3.74374 49.6769 4.23978 49.6815C4.73582 49.6769 5.22583 49.5723 5.68045 49.3738C6.13507 49.1754 6.54494 48.8872 6.88549 48.5265C7.58901 47.7628 7.97956 46.7625 7.97956 45.7243C7.97956 44.686 7.58901 43.6857 6.88549 42.922C6.54558 42.562 6.1366 42.2742 5.68297 42.0757C5.22935 41.8773 4.74039 41.7723 4.24528 41.767C3.74831 41.7708 3.25725 41.8751 2.80164 42.0736C2.34602 42.2721 1.93526 42.5607 1.59407 42.922C0.890544 43.6857 0.5 44.686 0.5 45.7243C0.5 46.7625 0.890544 47.7628 1.59407 48.5265ZM5.01534 31.735C5.40459 32.1475 5.87324 32.4771 6.39312 32.704C6.913 32.9308 7.47338 33.0502 8.04058 33.055C8.60779 33.0502 9.16817 32.9308 9.68805 32.704C10.2079 32.4771 10.6766 32.1475 11.0658 31.735C11.871 30.8624 12.3181 29.7186 12.3181 28.5312C12.3181 27.3439 11.871 26.2001 11.0658 25.3275C10.677 24.914 10.2086 24.5833 9.68871 24.3555C9.1688 24.1277 8.60818 24.0075 8.04058 24.002C7.47299 24.0075 6.91236 24.1277 6.39246 24.3555C5.87256 24.5833 5.40412 24.914 5.01534 25.3275C4.21014 26.2001 3.76304 27.3439 3.76304 28.5312C3.76304 29.7186 4.21014 30.8624 5.01534 31.735ZM14.9656 18.26C15.8567 19.206 17.1108 19.756 18.3759 19.756C19.63 19.756 20.8841 19.206 21.7752 18.26C22.6793 17.2781 23.1812 15.9922 23.1812 14.6575C23.1812 13.3228 22.6793 12.0369 21.7752 11.055C21.338 10.5888 20.8109 10.2159 20.2258 9.95883C19.6407 9.70173 19.0095 9.56572 18.3704 9.559C17.1108 9.559 15.8567 10.109 14.9656 11.055C14.0615 12.0369 13.5596 13.3228 13.5596 14.6575C13.5596 15.9922 14.0615 17.2781 14.9656 18.26ZM29.4923 10.725C30.4824 11.77 31.874 12.3805 33.2711 12.3805C34.6682 12.3805 36.0598 11.7755 37.0499 10.725C38.0569 9.63473 38.6161 8.20511 38.6161 6.721C38.6161 5.23689 38.0569 3.80727 37.0499 2.717C36.564 2.20083 35.9788 1.78813 35.3295 1.50366C34.6801 1.21918 33.98 1.06879 33.2711 1.0615C32.5622 1.06879 31.8621 1.21918 31.2127 1.50366C30.5634 1.78813 29.9782 2.20083 29.4923 2.717C28.4865 3.80786 27.9281 5.23726 27.9281 6.721C27.9281 8.20474 28.4865 9.63414 29.4923 10.725ZM45.7901 10.6315C46.8792 11.7865 48.4138 12.4575 49.9539 12.4575C51.4941 12.4575 53.0232 11.7865 54.1123 10.6315C55.2182 9.43198 55.8322 7.86024 55.8322 6.22875C55.8322 4.59726 55.2182 3.02552 54.1123 1.826C53.5773 1.25653 52.9326 0.801189 52.217 0.48738C51.5015 0.173571 50.7298 0.00778463 49.9484 0C48.4083 0 46.8737 0.671 45.7846 1.826C44.6787 3.02552 44.0647 4.59726 44.0647 6.22875C44.0647 7.86024 44.6787 9.43198 45.7846 10.6315H45.7901ZM60.7293 18.073C61.9174 19.327 63.5895 20.0585 65.2617 20.0585C66.9448 20.0585 68.6169 19.327 69.7995 18.073C71.0056 16.7648 71.6752 15.0507 71.6752 13.2715C71.6752 11.4923 71.0056 9.77818 69.7995 8.47C69.2165 7.8493 68.5139 7.35295 67.7341 7.01079C66.9542 6.66863 66.1132 6.48774 65.2617 6.479C63.584 6.479 61.9174 7.2105 60.7293 8.47C59.5233 9.77818 58.8537 11.4923 58.8537 13.2715C58.8537 15.0507 59.5233 16.7648 60.7293 18.073ZM71.3892 31.6965C72.6763 33.0605 74.4859 33.8525 76.3066 33.8525C78.1217 33.8525 79.9369 33.0605 81.2185 31.6965C82.525 30.2788 83.2503 28.4214 83.2503 26.4935C83.2503 24.5656 82.525 22.7083 81.2185 21.2905C80.5872 20.6188 79.8267 20.0816 78.9826 19.7111C78.1385 19.3406 77.2283 19.1445 76.3066 19.1345C74.4859 19.1345 72.6763 19.9265 71.3892 21.2905C70.0826 22.7083 69.3573 24.5656 69.3573 26.4935C69.3573 28.4214 70.0826 30.2788 71.3892 31.6965ZM75.7235 49.2305C77.1096 50.699 79.0568 51.5515 81.0204 51.5515C82.9786 51.5515 84.9258 50.699 86.3119 49.2305C87.7189 47.7032 88.5 45.7026 88.5 43.626C88.5 41.5494 87.7189 39.5488 86.3119 38.0215C85.6322 37.2972 84.8131 36.7177 83.9037 36.3179C82.9944 35.9181 82.0137 35.7062 81.0204 35.695C79.0568 35.695 77.1151 36.553 75.7235 38.0215C74.3153 39.5482 73.5334 41.5491 73.5334 43.626C73.5334 45.7029 74.3153 47.7038 75.7235 49.2305Z" fill="#CCB590"/>
</svg>
<p>Loading... Please wait......</p>
          </div>
          <p class="not-title">Didn’t Find What You’re Looking For?</p>
          <div class="not-spec">
          <p>Please fill in your details and one of our material experts will get back to you within 24 hours. For more </p>
          <p>information, contact us via E-mail at sales@samaterials.com</p>
          </div>
          </div>
            <div class="error-contact-content">
    <p class="error-contact-title">Unsure Which Diamonds to Choose?</p>
    <form action="" method="post" enctype="multipart/form-data">
      <div class="form-content">
        <div class="form-item">
          <span class="form-item-label"><span style="color: #ff5858">*</span>Your Name</span>
          <input type="text" name="nameInfo" id="nameInfo" />
          <div class="error-message">Please enter your name</div>
        </div>

        <div class="form-item not-verify">
          <span class="form-item-label">Company Name</span>
          <input type="text" name="companyName" id="companyName" />
        </div>
        <div class="form-item">
          <span class="form-item-label">
            <span style="color: #ff5858">*</span>
            You Email</span>
          <input type="text" name="email" id="email" />
          <div class="error-message" id="emailError"></div>
        </div>
        <div class="form-item">
          <span class="form-item-label"><span style="color: #ff5858">*</span>Country</span>
          <div class="select-dropdown">
            <p></p>
            <input
              type="hidden"
              name="country"
              id="country" />
            <div class="error-message" id="emailError"></div>
            <svg
              class="select-arrows"
              width="16"
              height="7"
              viewBox="0 0 16 7"
              fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M1 0.999272L8 5.70898L15 0.999272"
                stroke="#868686"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
            <ul id="countryList">
            </ul>
          </div>
        </div>
        <div class="form-item">
          <span class="form-item-label"><span style="color: #ff5858">*</span>Phone number</span>
          <input type="text" name="phone" id="phone" />
          <div class="error-message" id="emailError">Please enter your Phone</div>
        </div>
        <div class="form-item">
          <span class="form-item-label"><span style="color: #ff5858">*</span>Message</span>
          <input type="text" name="message" id="message" />
          <div class="error-message" id="emailError">Please enter your Message</div>

        </div>
        <div class="form-item not-verify">
          <div class="form-check">
            <input name="checkbox" id="checkbox" type="checkbox" checked="checked" value=true />
            <span>Yes, please call me back</span>
          </div>
        </div>
        <div class="form-item">
          <div
            class="g-recaptcha"
            data-sitekey="6Ld2Y7AqAAAAAJSkpkIMDDM0bv0p6ypbtejaO_hc"></div>
        </div>
      </div>
      <div>
        <button id="handleSendBtn" class="no-data-form-btn" type="button">Send Message</button>
      </div>
    </form>
  </div>
        </div>
      `);

    $(".select-dropdown").click(function () {
      var dropdown = $(this)
      var ul = dropdown.children('ul');
      var p = dropdown.find('p')
      var input = dropdown.find('input')
      // 如果为二级下拉
      if (ul.find('ul li').length) {
        var li = ul.find('ul li')
      } else {
        // 一级
        var li = ul.find('li')
      }

      var arrows = dropdown.find('.select-arrows')
      if (ul.css("display") == "none") {
        ul.slideDown("fast");
        arrows.css('transform', 'rotate(180deg)')
      } else {
        ul.slideUp("fast");
        arrows.css('transform', 'rotate(0)')
      }

      li.click(function () {
        var txt = $(this).text();
        var firstSelect = $(this).parent().prev().text();
        p.html(`${firstSelect} ${txt}`);
        input.val(`${firstSelect} ${txt}`);
        ul.slideUp("fast");
        arrows.css('transform', 'rotate(0)')
        // 如果选中的是 'Other'，则将 select-dropdown 的宽度设置为 50%
        if ($(this).parent().parent().hasClass('selfSelect')) {
          if (txt == 'Other') {
            dropdown.css('width', '50%');
            var itemssss = $(this).parent().parent().parent().find('.abcd');
            itemssss.css('width', '50%')
            // 展示 input
            dropdown.parent().find('.attribute_input').css('display', 'block');
          } else {
            dropdown.css('width', '100%');
            var itemssss = $(this).parent().parent().parent().find('.abcd');
            itemssss.css('width', '0')
            dropdown.parent().find('.attribute_input').css('display', 'none');
            dropdown.parent().find('.attribute_input').val('');
            dropdown.parent().find('.error-message').text(''); // 移除错误信息
          }
        }
      });
      dropdown.mouseleave(function () {
        ul.slideUp("fast");
        arrows.css('transform', 'rotate(0)')
      })
    });

    const $ul = $('#countryList');
    const countries = DropdownOptions.CountryListSelect;
    // 清空原有 li（防止重复渲染）
    $ul.empty();
    // 动态生成 li
    countries.forEach(country => {
      $ul.append(`<li data-value="${country.value}">${country.label}</li>`);
    });

    // 点击 li 事件
    $ul.on('click', 'li', function (e) {
      e.stopPropagation();
      const value = $(this).data('value');
      const label = $(this).text();
      $('#country').val(value);       // 写入 hidden input
      $('.select-dropdown p').text(label); // 显示选中文字
      $('#country').siblings('.error-message').removeClass('show');
      $('.select-dropdown').removeClass('open');
    });
    // 点击下拉框显示/隐藏 ul
    $('.select-dropdown').click(function (e) {
      e.stopPropagation();
      $(this).toggleClass('open');
    });

    // 点击其他地方关闭下拉
    $(document).click(function () {
      $('.select-dropdown').removeClass('open');
    });

    // 校验字段
    const validationRules = [
      {
        key: "nameInfo",
        required: true,
        maxLength: 50,
        errorMessage: {
          required: "Please enter your name",
          maxLength: "The length cannot exceed 50"
        }
      },
      {
        key: "companyName",
        required: false,
      },
      {
        key: "checkbox",
        required: false,
      },
      {
        key: "email",
        required: true,
        maxLength: 30,
        regex: regEmail,
        errorMessage: {
          required: "Please enter your email",
          maxLength: "The length cannot exceed 30",
          regex: "Please enter a valid email"
        }
      },
      {
        key: "country",
        required: true,
        errorMessage: {
          required: "Please Select your Country",
        }
      },
      {
        key: "phone",
        required: true,
        regex: regPhone,
        errorMessage: {
          required: "Please enter your Phone",
          regex: "Please enter a valid phone number"
        }
      },
      {
        key: "message",
        required: true,
        errorMessage: {
          required: "Please enter your message",
        }
      },
    ];

    // 校验函数
    function validateField (rule) {
      const $input = $(`#${rule.key}`);


      const $error = $input.siblings('.error-message');

      console.log($error);

      const value = $input.val().trim();

      // 必填校验
      if (rule.required && !value) {
        $error.text(rule.errorMessage.required).addClass('show');
        return false;
      }

      // 最大长度校验
      if (rule?.maxLength && value.length > rule.maxLength) {
        $error.text(rule.errorMessage.maxLength).addClass('show');
        return false;
      }

      // 正则校验
      if (rule?.regex && value && !rule?.regex.test(value)) {
        $error.text(rule.errorMessage.regex).addClass('show');
        return false;
      }

      // 校验通过
      $error.removeClass('show');
      return true;
    }

    function getFormValues () {
      let allValid = true;
      const formValues = {};
      validationRules.forEach(rule => {
        const $el = $("input[name='" + rule.key + "']");
        let value = "";
        if ($el.length) {
          if ($el.attr("type") === "hidden") {
            value = $el.val() || "";
          } else if ($el.attr("type") === "checkbox") {
            // ✅ 处理 checkbox
            value = $el.is(":checked"); // 直接返回 true/false
          } else {
            value = ($el.val() || "").trim();
          }
        }
        formValues[rule.key] = value;
        // 校验必填或有校验规则的字段
        if (rule.required || rule.regex) {
          if (!validateField(rule)) {
            allValid = false;
          }
        }
      });
      return allValid ? formValues : null;
    }


    // 发送信息
    $("#handleSendBtn").click(function () {
      const formValues = getFormValues();
      if (!formValues) return;
      console.log(formValues);
    })

  }


  // 渲染分页
  function renderPagination (currentPage, total, render) {
    // 整个分页容器
    let $pagination = $('<div class="page-products"></div>');
    // 左箭头
    let $left = $(`<div  class="pagination-left page-btn" ${currentPage === 1 ? 'style="opacity:0.3;pointer-events:none;"' : ''}>
     <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M0.988692 5.82543C0.998591 5.48788 1.13512 5.15789 1.39998 4.90844L6.05289 0.526369C6.43646 0.161393 7.04713 0.179302 7.40866 0.566128C7.77402 0.953066 7.75625 1.55911 7.36895 1.92014L3.15485 5.88895L7.12913 10.0979C7.4945 10.4848 7.47673 11.0909 7.08943 11.4519C6.70201 11.8168 6.09518 11.799 5.73366 11.4121L1.34554 6.76493C1.09575 6.50039 0.978794 6.16297 0.988692 5.82543Z"
              fill="#586168" />
          </svg>
  </div>`);



    // 页码容器
    let $numbers = $('<div class="page-numbers"></div>');

    // 首页始终显示
    if (currentPage > 2) {
      $numbers.append(`<button class="page-number" data-page="1">1</button>`);
      if (currentPage > 3) {
        $numbers.append(`<span class="page-number">...</span>`);
      }
    }


    if (currentPage >= total - 2) {
      // ✅ 当前页在最后 3 页时，显示最后三页
      for (let i = total - 2; i <= total; i++) {
        if (i >= 1) {
          $numbers.append(`<button data-page="${i}" class="page-number ${i === currentPage ? 'active' : ''}">${i}</button>`);
        }
      }
    } else {
      // ✅ 正常显示：当前页和它后面两页
      $numbers.append(`<button class="page-number active">${currentPage}</button>`);
      for (let i = currentPage + 1; i <= Math.min(total, currentPage + 2); i++) {
        $numbers.append(`<button class="page-number" data-page="${i}">${i}</button>`);
      }
      if (currentPage < total - 2) {
        if (currentPage < total - 3) {
          $numbers.append(`<span class="page-number">...</span>`);
        }
        $numbers.append(`<button class="page-number" data-page="${total}">${total}</button>`);
      }
    }

    // 右箭头
    let $right = $(`<div class="pagination-right page-btn" ${currentPage === total ? 'style="opacity:0.3;pointer-events:none;"' : ''}>
   <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path
              d="M6.79155 5.92141C6.79155 6.2591 6.66475 6.59295 6.40731 6.85005L1.88486 11.3666C1.51215 11.7427 0.901216 11.7427 0.528507 11.3666C0.151956 10.9906 0.151956 10.3843 0.528507 10.012L4.62446 5.92141L0.528507 1.83077C0.151956 1.45471 0.151956 0.848408 0.528507 0.476183C0.905058 0.100121 1.51215 0.10012 1.88486 0.476183L6.40731 4.99277C6.66475 5.24987 6.79155 5.58372 6.79155 5.92141Z"
              fill="#586168" />
          </svg>
  </div>`);

    // 拼接
    $pagination.append($left).append($numbers).append($right);
    // ⚡插入到列表容器下面
    // $('.products-content-list').next('.page-products').remove(); // 删除旧的
    // $('.products-content-list').after($pagination);
    render.next('.page-products').remove(); // 删除旧的
    render.after($pagination);

    // ✅ 点击事件（事件委托，避免重复绑定）
    $pagination.off('click').on('click', '.page-number, .page-btn', function () {
      let targetPage = currentPage;

      if ($(this).hasClass('page-number')) {
        targetPage = parseInt($(this).data('page'));
      } else if ($(this).hasClass('pagination-left')) {
        targetPage = currentPage - 1;
      } else if ($(this).hasClass('pagination-right')) {
        targetPage = currentPage + 1;
      }

      if (targetPage !== currentPage && targetPage >= 1 && targetPage <= total) {
        console.log(targetPage, '_targetPage');

        // ⚡ 调用接口，重新渲染
        // loadTabData(tabName, targetPage);

      }
    })
  }


  // 渲染 products 数据
  function renderProducts (resData) {
    // 找到对应内容容器
    const $container = $(`.${tabsDefault}`);

    // 先渲染搜索结果
    $container.html(
      `<div class="products-result">${resData.total} results for Search "${tabsDefault}"</div`)
    // 创建列表容器

    if (resData.list && resData.list.length > 0) {
      const $list = $('<div class="products-content-list"></div>')

      resData.list.forEach((item, idx) => {
        const $item = $(`
       <div class="products-content-item">
            <div class="products-img">
              <img src="${item.img}" alt="">
              <div class="products-myLick ${item.isMyLike ? 'active' : ''}"">
                <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M12.6846 0.612061C14.99 0.612061 16.9384 2.6785 16.9385 5.30933C16.9385 6.85651 16.2561 7.95259 15.6396 8.91577C14.7812 10.2542 13.2543 11.7892 11.8887 13.0261C10.5334 14.2537 9.37757 15.1518 9.29004 15.2175L9.28027 15.2253C9.18832 15.2979 9.08586 15.3298 8.98242 15.3298C8.90466 15.3298 8.82739 15.312 8.75488 15.2722L8.68457 15.2253L8.6748 15.2175L7.85059 14.5593C7.38023 14.1736 6.75028 13.6429 6.07129 13.0291C4.70461 11.7934 3.17927 10.2596 2.32617 8.91772L2.3252 8.91675L2.09277 8.54858C1.54884 7.67222 1.02539 6.66363 1.02539 5.30933C1.02551 2.6785 2.97393 0.612074 5.2793 0.612061C6.56354 0.612061 7.77838 1.25869 8.5791 2.34644L8.98047 2.89038L9.38379 2.34839C10.1955 1.25759 11.402 0.612216 12.6846 0.612061Z"
                    stroke="#B0B0B0" />
                </svg>
              </div>
            </div>
            <div class="products-title">
              <p>${item.title}</p>
            </div>
            <div class="products-desc">
              <p>
                ${item.desc}
              </p>
            </div>
            <div class="products-btn">
              <button type="button" class="addBag">
                Add to bag
              </button>
              <button type="button" class="inquiry">
                Inquiry
              </button>
            </div>
          </div>
        `)

        // 将整个对象挂载到 DOM 上
        $item.data('product_info', item)
        $list.append($item)
      })

      // 挂载到页面
      $container.append($list)

      // ✅ 列表渲染完成后，统一渲染分页
      renderPagination(resData.currentPage, resData.total, $list);

      // 添加到bag（Inquiry页）中
      $(document).on('click', '.addBag', function () {
        const productData = $(this).closest('.products-content-item').data('product_info')
        window.LocalStore.update('storeBagList', list => {
          list = Array.isArray(list) ? list : []
          const isExist = list.some(item => item.id === productData.id)
          if (isExist) {
            return list.map(item => item.id === productData.id ? productData : item)
          } else {
            list.push(productData)
            return list
          }
        })

      })

      // 产品询盘页
      $(document).on('click', '.inquiry', function () {
        const $item = $(this).closest('.products-content-item')
        const title = $item.find('.products-title')
      })

      // 点击收藏事件委托
      $(document).on('click', '.products-myLick', function () {
        const productData = $(this).closest('.products-content-item').data('product_info')
        $(this).toggleClass('active')
      })
    } else {
      // ✅ 没有数据时显示占位
      renderNoData($container)
    }
  }

  // 渲染 Categories 数据
  function renderCategories (resData) {
    const $container = $(`.${tabsDefault}`);
    // 清空内容
    $container.empty();
    // 先渲染搜索结果
    $container.html(
      `<div class="products-result">${resData.total} results for Search "${tabsDefault}"</div`)
    if (resData.list && resData.list.length > 0) {
      // 创建列表容器
      const $list = $('<div class="products-content-list"></div>')

      resData.list.forEach((item) => {
        const $item = $(`
         <div class="categories-content-item">
            <div class="categories-img">
              <img src="${item.img}" alt="">
            </div>
            <div class="products-title">${item.title}</div>
          </div>
        `)
        // 将整个对象挂载到 DOM 上
        $item.data('categories_info', item)
        $list.append($item)

      })
      // 挂载到页面
      $container.append($list)
    } else {
      // ✅ 没有数据时显示占位
      renderNoData($container)
    }

  }

  // 渲染 renderBlogs 数据
  function renderBlogs (resData) {
    const $container = $(`.${tabsDefault}`);
    // 清空内容
    $container.empty();

    // 先渲染搜索结果
    $container.html(
      `<div class="products-result">${resData.total} results for Search "${tabsDefault}"</div`)

    if (resData.list && resData.list.length > 0) {
      const $list = $('<div class="products-content-list"></div>')
      resData.list.forEach((item) => {
        const $item = $(`
         <div class="blogs-content-item">
            <div class="blogs-img">
              <img src="${item.img}" alt="">
            </div>
            <div class="blogs-content-body">
              <div class="blogs-copy-area">
                <div class="products-title">
               ${item.title}
                </div>
                <div class="products-desc">
                  <p>
                    ${item.desc}
                  </p>
                </div>
                <button class="blogs-more">
                  Read more
                </button>
              </div>
              <div class="blogs-read">
                <div class="blogs-info">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M7.9692 2.24363H7.91829C7.16044 2.23922 6.40931 2.38585 5.70875 2.67494C5.00819 2.96404 4.37225 3.3898 3.83805 3.92738C3.30386 4.46496 2.88212 5.10358 2.59746 5.80595C2.31279 6.50832 2.17092 7.26037 2.18011 8.01817C2.20182 9.56858 2.82835 11.0492 3.92612 12.1442C5.02389 13.2393 6.50602 13.8621 8.05647 13.88H8.11102C8.86612 13.88 9.61372 13.7302 10.3105 13.4392C11.0072 13.1481 11.6393 12.7217 12.17 12.1845C12.7007 11.6474 13.1195 11.0103 13.4022 10.3101C13.6848 9.60984 13.8256 8.86049 13.8165 8.10544C13.7977 6.55914 13.1761 5.08124 12.0839 3.9864C10.9918 2.89155 9.51545 2.26625 7.9692 2.24363ZM11.6347 11.6945C11.1642 12.1628 10.6051 12.5325 9.99012 12.7823C9.37514 13.032 8.71655 13.1567 8.05283 13.1491C6.69312 13.1312 5.39419 12.5828 4.43298 11.6209C3.47177 10.659 2.92433 9.35972 2.90738 7.99999C2.90061 7.33921 3.02546 6.6837 3.27466 6.07167C3.52385 5.45965 3.89241 4.90336 4.35882 4.43525C4.82524 3.96714 5.38019 3.59657 5.99131 3.34516C6.60243 3.09375 7.25749 2.96652 7.91829 2.9709H7.96556C9.32019 2.99254 10.6131 3.54128 11.5697 4.50063C12.5263 5.45998 13.0714 6.75439 13.0892 8.10908C13.0987 8.7736 12.9749 9.4333 12.7251 10.0491C12.4753 10.665 12.1045 11.2245 11.6347 11.6945Z"
                      fill="#B0B0B0" />
                    <path
                      d="M9.45526 8.36355H8.00071V5.45446C8.00071 5.35801 7.9624 5.26552 7.8942 5.19733C7.82601 5.12913 7.73352 5.09082 7.63707 5.09082C7.54063 5.09082 7.44814 5.12913 7.37994 5.19733C7.31175 5.26552 7.27344 5.35801 7.27344 5.45446V8.72718C7.27344 8.77494 7.28284 8.82222 7.30112 8.86634C7.31939 8.91046 7.34618 8.95055 7.37994 8.98431C7.41371 9.01808 7.4538 9.04487 7.49792 9.06314C7.54203 9.08141 7.58932 9.09082 7.63707 9.09082H9.45526C9.5517 9.09082 9.64419 9.05251 9.71239 8.98431C9.78058 8.91612 9.81889 8.82363 9.81889 8.72718C9.81889 8.63074 9.78058 8.53825 9.71239 8.47005C9.64419 8.40186 9.5517 8.36355 9.45526 8.36355Z"
                      fill="#B0B0B0" />
                  </svg>
                  <span>${item.time}</span>
                </div>
                <div class="blogs-info">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M7.99805 3.16663C10.1315 3.16663 11.8418 4.38695 13.0498 5.67542C13.6492 6.31481 14.1106 6.95619 14.4219 7.43811C14.5711 7.66918 14.6851 7.86241 14.7627 7.99963C14.6851 8.13689 14.5713 8.33076 14.4219 8.56213C14.1106 9.04403 13.6492 9.68551 13.0498 10.3248C11.8418 11.6132 10.1314 12.8336 7.99805 12.8336C5.86462 12.8335 4.15422 11.6133 2.94629 10.3248C2.34685 9.68543 1.88546 9.04405 1.57422 8.56213C1.42473 8.33066 1.31097 8.13689 1.2334 7.99963C1.31094 7.86246 1.42498 7.66921 1.57422 7.43811C1.88543 6.95623 2.34693 6.31476 2.94629 5.67542C4.15422 4.38696 5.86462 3.16675 7.99805 3.16663Z"
                      stroke="#B0B0B0" stroke-linecap="round" stroke-linejoin="round" />
                    <path
                      d="M8 6.5C8.82843 6.5 9.5 7.17157 9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5Z"
                      stroke="#B0B0B0" stroke-linecap="round" stroke-linejoin="round" />
                  </svg>
                  <span>${item.watchNum}</span>
                </div>
              </div>
            </div>
          </div>
        `)
        // 将整个对象挂载到 DOM 上
        $item.data('categories_info', item)
        $list.append($item)

      })
      // 挂载到页面
      $container.append($list)
      // ✅ 列表渲染完成后，统一渲染分页
      renderPagination(resData.currentPage, resData.total, $list);
    } else {
      // ✅ 没有数据时显示占位
      renderNoData($container)
    }
  }

  // 渲染app 数据
  function renderApplications (resData) {
    const $container = $(`.${tabsDefault}`);

    // 清空内容
    $container.empty();

    // 先渲染搜索结果
    $container.html(
      `<div class="products-result">${resData.total} results for Search "${tabsDefault}"</div`)

    if (resData.list && resData.list.length > 0) {

      const $list = $('<div class="products-content-list"></div>')
      resData.list.forEach((item) => {
        const $item = $(`
         <div class="app-content">
            <div class="app-img">
              <img src="${item.img}" alt="">
            </div>
            <div class="products-title">
              ${item.title}
            </div>
          </div>
        `)
        // 将整个对象挂载到 DOM 上
        $item.data('categories_info', item)
        $list.append($item)

      })
      // 挂载到页面
      $container.append($list)
      // ✅ 列表渲染完成后，统一渲染分页
      renderPagination(resData.currentPage, resData.total, $list);
    } else {
      renderNoData($container)
    }
  }

  // 渲染 Documents 数据
  function renderDocuments (resData) {
    const $container = $(`.${tabsDefault}`);
    // 清空内容
    $container.empty();
    // 先渲染搜索结果
    $container.html(
      `<div class="products-result">${resData.total} results for Search "${tabsDefault}"</div`)
    if (resData.list && resData.list.length > 0) {
      const $list = $('<div class="documents-content-body"></div>')
      resData.list.forEach((item) => {
        const $item = $(`
      <div class="documents-content-list">
            <div class="documents-content-item">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M15.0223 5.0748C15.1277 5.18027 15.1875 5.32266 15.1875 5.47207V16.3125C15.1875 16.6236 14.9361 16.875 14.625 16.875H3.375C3.06387 16.875 2.8125 16.6236 2.8125 16.3125V1.6875C2.8125 1.37637 3.06387 1.125 3.375 1.125H10.8404C10.9898 1.125 11.134 1.18477 11.2395 1.29023L15.0223 5.0748ZM13.8902 5.73047L10.582 2.42227V5.73047H13.8902ZM11.1308 11.2018C10.864 11.1932 10.5803 11.2135 10.258 11.2539C9.8309 10.9904 9.54339 10.6284 9.33914 10.0968C9.34406 10.0765 9.35425 10.0346 9.35782 10.0198C9.36615 9.98534 9.37306 9.95658 9.37967 9.92862C9.45513 9.60993 9.49595 9.3774 9.50799 9.14296C9.5171 8.96588 9.50729 8.80251 9.47588 8.6512C9.4179 8.32453 9.18664 8.13347 8.89543 8.12164C8.62392 8.11062 8.37425 8.26214 8.31041 8.49734C8.20647 8.87723 8.26734 9.37747 8.4876 10.2302C8.20698 10.8992 7.83629 11.6832 7.58754 12.1206C7.25558 12.2918 6.99685 12.4476 6.77978 12.6203C6.4932 12.8482 6.31431 13.0824 6.26498 13.3288C6.24117 13.4427 6.27715 13.5918 6.3592 13.7139C6.4523 13.8524 6.59268 13.9423 6.76095 13.9554C7.1855 13.9884 7.70718 13.5506 8.28304 12.5622C8.34096 12.543 8.40222 12.5225 8.47686 12.4973C8.51769 12.4835 8.66079 12.4351 8.68621 12.4265C8.81842 12.3819 8.91438 12.3499 9.00923 12.319C9.42049 12.1852 9.73162 12.1005 10.0149 12.0525C10.5066 12.3157 11.0751 12.4883 11.458 12.4883C11.774 12.4883 11.9876 12.3245 12.0647 12.0667C12.1325 11.8402 12.0787 11.5776 11.9333 11.4324C11.7829 11.2846 11.5062 11.2139 11.1308 11.2018ZM6.77166 13.4591V13.4528L6.77387 13.4469C6.79628 13.3867 6.82937 13.3237 6.87231 13.2578C6.94761 13.1422 7.05113 13.0205 7.17943 12.891C7.24834 12.8215 7.32009 12.7539 7.40426 12.678C7.42312 12.6609 7.5433 12.5539 7.56578 12.5329L7.76224 12.35L7.6195 12.5774C7.40283 12.9226 7.20712 13.1711 7.0392 13.3333C6.97755 13.3928 6.92318 13.437 6.87939 13.4652C6.86134 13.4768 6.84571 13.4853 6.83346 13.4902C6.82627 13.4931 6.81991 13.495 6.8136 13.4956C6.80692 13.4963 6.80015 13.4954 6.79396 13.4927C6.78734 13.49 6.78169 13.4853 6.77772 13.4793C6.77376 13.4733 6.77164 13.4663 6.77166 13.4591ZM8.98534 9.62239L8.94561 9.69282L8.92118 9.61574C8.86644 9.44297 8.82649 9.1826 8.81543 8.94783C8.80284 8.68069 8.82404 8.52028 8.90835 8.52028C9.02682 8.52028 9.08116 8.71026 9.08546 8.99582C9.08926 9.24683 9.04978 9.50808 8.98534 9.62239ZM8.88321 10.6501L8.91018 10.5789L8.94688 10.6456C9.15237 11.019 9.41899 11.3306 9.7122 11.5476L9.77539 11.5944L9.6984 11.6103C9.41138 11.6696 9.14391 11.759 8.77836 11.9063C8.81657 11.891 8.39827 12.0621 8.29253 12.1027L8.20021 12.1381L8.24947 12.0523C8.46656 11.6745 8.66711 11.2204 8.88321 10.6501ZM11.654 11.9906C11.5157 12.0452 11.2184 11.9964 10.6948 11.7729L10.5619 11.7161L10.706 11.7055C11.1155 11.6752 11.4057 11.6977 11.5747 11.7596C11.6466 11.7859 11.6947 11.8192 11.716 11.8572C11.739 11.8983 11.7285 11.9418 11.6921 11.9681C11.6842 11.9756 11.6718 11.9836 11.654 11.9906Z"
                  fill="#CCB591" />
              </svg>
              <div class="products-title">${item.title}</div>
            </div>
            <div class="documents-operation">
              <div class="operation-info">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M7.99805 3.16663C10.1315 3.16663 11.8418 4.38695 13.0498 5.67542C13.6492 6.31481 14.1106 6.95619 14.4219 7.43811C14.5711 7.66918 14.6851 7.86241 14.7627 7.99963C14.6851 8.13689 14.5713 8.33076 14.4219 8.56213C14.1106 9.04403 13.6492 9.68551 13.0498 10.3248C11.8418 11.6132 10.1314 12.8336 7.99805 12.8336C5.86462 12.8335 4.15422 11.6133 2.94629 10.3248C2.34685 9.68543 1.88546 9.04405 1.57422 8.56213C1.42473 8.33066 1.31097 8.13689 1.2334 7.99963C1.31094 7.86246 1.42498 7.66921 1.57422 7.43811C1.88543 6.95623 2.34693 6.31476 2.94629 5.67542C4.15422 4.38696 5.86462 3.16675 7.99805 3.16663Z"
                    stroke="#B0B0B0" stroke-linecap="round" stroke-linejoin="round" />
                  <path
                    d="M8 6.5C8.82843 6.5 9.5 7.17157 9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5Z"
                    stroke="#B0B0B0" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <a>Preview</a>
              </div>
              <div class="operation-info">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M12.25 8.75V11.0833C12.25 11.3928 12.1271 11.6895 11.9083 11.9083C11.6895 12.1271 11.3928 12.25 11.0833 12.25H2.91667C2.60725 12.25 2.3105 12.1271 2.09171 11.9083C1.87292 11.6895 1.75 11.3928 1.75 11.0833V8.75"
                    stroke="#CCB590" stroke-linecap="round" stroke-linejoin="round" />
                  <path d="M4.08334 5.83331L7.00001 8.74998L9.91668 5.83331" stroke="#CCB590" stroke-linecap="round"
                    stroke-linejoin="round" />
                  <path d="M7 8.75V1.75" stroke="#CCB590" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <a>Download</a>
              </div>
            </div>
          </div>
        `)
        // 将整个对象挂载到 DOM 上
        $item.data('categories_info', item)
        $list.append($item)

      })
      // 挂载到页面
      $container.append($list)
      // ✅ 列表渲染完成后，统一渲染分页
      renderPagination(resData.currentPage, resData.total, $list);
    } else {
      renderNoData($container)
    }
  }

  // 初始化渲染第一个 Tab
  enum_Tabs[tabsDefault](productsDataList);


})
